<template>
  <div ref="chartRef" style="width: 100%; height: 500px"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-wordcloud"; // 引入 ECharts 词云扩展
import { useRouter } from "vue-router";

const router = useRouter();

const chartRef = ref<HTMLDivElement | null>(null);

const option = {
  series: [
    {
      type: "wordCloud",
      shape: "circle",
      sizeRange: [12, 60],
      rotationRange: [-90, 90],
      gridSize: 8,
      textStyle: {
        color: function () {
          return (
            "rgb(" +
            [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
            ].join(",") +
            ")"
          );
        },
      },
      data: [
        { name: "教育扶贫", value: 100 },
        { name: "葡萄酒", value: 90 },
        { name: "绿色工业", value: 80 },
        { name: "绿色工业", value: 70 },
        { name: "绿色工业", value: 70 },
        // 其他数据...
      ],
    },
  ],
};

onMounted(() => {
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value);
    chart.setOption(option);

    // 窗口大小变化时，调整图表大小
    window.addEventListener("resize", () => {
      chart.resize();
    });
  }
});
</script>

<style scoped></style>
